<template>
  <div class="container">
    <!-- 子路由出口 -->
    <router-view />
    <van-nav-bar title="个人信息设置" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <van-cell-group>
      <!-- input 文件选择框 -->
      <input type="file" hidden ref="file" @change="onFileChange" />
      <van-cell>
        <template #title>
          <van-image
            class="avatar"
            :src="userInfo.touxiang"
            round
            width="50px"
            height="50px"
            @click="$refs.file.click()"
          ></van-image>
          <span>{{ userInfo.name }}</span>
        </template>
      </van-cell>
      <van-cell title="账户名称" :value="userInfo.nameID"> </van-cell>
      <van-cell
        title="个性昵称"
        is-link
        :value="userInfo.name ? userInfo.name : '未设置'"
        @click="editPersonalName"
      >
      </van-cell>
      <van-cell
        title="手机号码"
        is-link
        :value="userInfo.mobile"
        @click="editPhoneNumber"
      >
      </van-cell>
      <van-cell
        title="出生日期"
        is-link
        :value="
          userInfo.birthday
            ? $dayjs(userInfo.birthday).format('YYYY-MM-DD')
            : '未设置'
        "
        @click="showBirthDay = true"
      >
      </van-cell>
      <van-cell
        title="电子邮箱"
        is-link
        :value="userInfo.email ? userInfo.email : '未设置'"
        @click="editEmail"
      >
      </van-cell>
    </van-cell-group>
    <van-cell
      title="语言设置"
      is-link
      value="简体中文"
      class="lang"
      @click="showSelectLanguage = true"
    >
    </van-cell>
    <!--个性昵称、手机号码-->
    <van-popup
      v-model="showPersonalNamePopup"
      :style="{ width: '375px', height: '100%' }"
      duration="0"
    >
      <EditNameOrPhoneOrEmail
        @changeShowPersonalNamePopup="changeShowPopup"
        @getUserInfo="getUserInfo"
        :type="type"
        :userInfo="userInfo"
      ></EditNameOrPhoneOrEmail>
    </van-popup>
    <!--出生日期-->
    <van-popup
      v-model="showBirthDay"
      @getUserInfo="getUserInfo"
      position="bottom"
      :style="{ width: '375px', height: '40%' }"
    >
      <BirthDay
        v-if="userInfo"
        :userInfo="userInfo"
        @changeShowBirthDayPopup="changeShowPopup"
      ></BirthDay>
    </van-popup>
    <!--语言选择-->
    <van-popup
      v-model="showSelectLanguage"
      position="bottom"
      :style="{ width: '375px', height: '40%' }"
    >
      <LanguagePicker
        :userInfo="userInfo"
        @changeShowLanguagePickerPopup="changeShowPopup"
      ></LanguagePicker>
    </van-popup>

    <!-- 编辑头像 -->
    <van-popup
      v-model="isUpdatePhotoShow"
      position="bottom"
      style="height: 100%"
    >
      <UpdatePhoto
        v-if="isUpdatePhotoShow"
        :img="img"
        :files="files"
        :id="userInfo.id"
        @close="isUpdatePhotoShow = false"
      ></UpdatePhoto>
    </van-popup>
  </div>
</template>

<script>
import EditNameOrPhoneOrEmail from "./components/EditNameOrPhoneOrEmail";
import BirthDay from "./components/BirthDay";
import LanguagePicker from "./components/LanguagePicker";
import { getUserInfo } from "@/api/user";
import { mapGetters } from "vuex";
import UpdatePhoto from "./components/update-photo.vue";

export default {
  name: "UserInfo",
  data() {
    return {
      personalName: "",
      showPersonalNamePopup: false,
      showBirthDay: false,
      showSelectLanguage: false,
      type: "",
      files: {},
      userInfo: {},
      img: null, // 预览的图片
      isUpdatePhotoShow: false,
    };
  },
  updated() {},
  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    editPersonalName() {
      this.showPersonalNamePopup = true;
      this.type = "PersonalName";
    },
    changeShowPopup() {
      this.showPersonalNamePopup = false;
      this.showSelectLanguage = false;
      this.showBirthDay = false;
    },
    editPhoneNumber() {
      this.showPersonalNamePopup = true;
      this.type = "PhoneNumber";
    },
    editEmail() {
      this.showPersonalNamePopup = true;
      this.type = "email";
    },

    // 获取个人数据
    async getUserInfo() {
      const { data } = await getUserInfo(this.token);
      this.userInfo = data;
    },
    onFileChange() {
      // 获取文件对象
      this.files = this.$refs.file.files[0];
      // 基于文章对象获取到 blob 数据
      this.img = window.URL.createObjectURL(this.files);

      this.isUpdatePhotoShow = true;

      // const cos = new COS({
      //   SecretId: "AKIDAHE3nQwJTQx7HUfhZFouvs591pbGwbBe",
      //   SecretKey: "VvHYhqrejdP2TgkiZJuTxPsJg1IbuBOV",
      // });

      // // 执行上传操作
      // cos.putObject(
      //   {
      //     Bucket: "zhongtai-1312798478", // 存储桶
      //     Region: "ap-guangzhou", // 地域
      //     Key: file.name, // 文件名
      //     Body: file, // 要上传的文件对象
      //     StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可
      //     // onProgress: (params) => {
      //     //   this.percent = params.percent * 100;
      //     // },
      //     // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
      //   },
      //   async (err, data) => {
      //     // data返回数据之后 应该如何处理
      //     // console.log(err || data);
      //     // debugger;
      //     // data中有一个statusCode === 200 的时候说明上传成功
      //     if (!err && data.statusCode === 200) {
      //       //   此时说明文件上传成功  要获取成功的返回地址
      //       // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
      //       // 目前虽然是一张图片 但是请注意 我们的fileList是一个数组
      //       // 需要知道当前上传成功的是哪一张图片
      //       // 去找谁的uid等于刚刚记录下来的id
      //       // 将成功的地址赋值给原来的url属性
      //       // console.log("http://" + data.Location);
      //       // return "http://" + data.Location;
      //       // await updataUser({
      //       //   id: this.userInfo.id,
      //       //   touxiang: "http://" + data.Location,
      //       // });
      //       // upload 为true 表示这张图片已经上传完毕 这个属性要为我们后期应用的时候做标记
      //       // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
      //       // 将上传成功的地址 回写到了fileList中 fileList变化  =》 upload组件 就会根据fileList的变化而去渲染视图
      //       // this.showPercent = false; // 隐藏进度条
      //       // this.percent = 0; // 进度归0
      //     }
      //   }
      // );

      // 展示预览图片弹出层
      // this.isUpdatePhotoShow = true;
      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      this.$refs.file.value = "";
    },
  },
  components: {
    EditNameOrPhoneOrEmail,
    BirthDay,
    LanguagePicker,
    UpdatePhoto,
  },
  created() {
   this.getUserInfo(this.token);
  }
}
</script>
<style scoped>
.container {
  height: 100vh;
  background-color: #efefef;
}
.avatar {
  margin-right: 10px;
  vertical-align: middle;
}
.lang {
  margin-top: 20px;
}
</style>
